﻿<UserControl x:Class="Microsoft.WVB.UI.BroadcasterChannelControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="300" Height="170">
    <UserControl.Resources>
        <Storyboard x:Name="expandSelectedBroadcaster">
            <!-- This is an instantaneous animation because we're showing this control right over
                         where its carousel image should be. This transition shouldn't be visible,
                         as it's supposed look exactly the same. It's a smoke and mirrors switch so
                         that we can then go on to make the thing animated and interact as desired.
                         (Not something we can really do with the 3D carousel itself, hence the trick.)
                    -->
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="currentBroadcasterInfo" Storyboard.TargetProperty="(UIElement.Opacity)">
                <DiscreteDoubleKeyFrame Value="1" KeyTime="0:0:0" />
            </DoubleAnimationUsingKeyFrames>


            <!-- This one is a fade on the other hand. -->
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="channelItems" Storyboard.TargetProperty="(UIElement.Opacity)">
                <!--<SplineDoubleKeyFrame Value="0" KeyTime="0:0:0" />-->
                <SplineDoubleKeyFrame Value="1" KeyTime="0:0:0.5" KeySpline="0,0,0.424,1" />
            </DoubleAnimationUsingKeyFrames>


            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="currentImage"
							Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)">
                <SplineDoubleKeyFrame Value="1.5" KeyTime="0:0:0.5" KeySpline="0,0,0.424,1" />
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="currentImage"
							Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)">
                <SplineDoubleKeyFrame Value="1.5" KeyTime="0:0:0.5" KeySpline="0,0,0.424,1" />
            </DoubleAnimationUsingKeyFrames>

        </Storyboard>
        <Storyboard x:Name="collapseSelectedBroadcaster">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="currentBroadcasterInfo" Storyboard.TargetProperty="(UIElement.Opacity)">
                <!--<SplineDoubleKeyFrame Value="1" KeyTime="0:0:0.5" />-->
                <DiscreteDoubleKeyFrame Value="0" KeyTime="0:0:0.5" />
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="channelItems" Storyboard.TargetProperty="(UIElement.Opacity)">
                <!--<SplineDoubleKeyFrame Value="1" KeyTime="0:0:0" />-->
                <SplineDoubleKeyFrame Value="0" KeyTime="0:0:0.5" KeySpline="0.311,0.632,0.727,0.982" />
            </DoubleAnimationUsingKeyFrames>

            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="currentImage"
							Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)">
                <SplineDoubleKeyFrame KeyTime="0:0:0.5" Value="1" KeySpline="0.311,0.632,0.727,0.982" />
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="currentImage"
							Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)">
                <SplineDoubleKeyFrame KeyTime="0:0:0.5" Value="1" KeySpline="0.311,0.632,0.727,0.982" />
            </DoubleAnimationUsingKeyFrames>

        </Storyboard>

    </UserControl.Resources>
    <Grid x:Name="currentBroadcasterInfo" Opacity="1" >
        <Grid.RowDefinitions>
            <RowDefinition MinHeight="75" MaxHeight="95" />
            <RowDefinition Height="4" />
            <RowDefinition Height="46" />
        </Grid.RowDefinitions>

        <!-- Invisible but mousable elements to stop annoying loss of focus when mouse
                 moves from image onto channels -->

        <Rectangle Grid.RowSpan="3" Margin="10,90,0,0" Fill="Transparent" VerticalAlignment="Bottom" />
        <Rectangle Grid.Row="2" Fill="Transparent" />
        <Grid x:Name="currentImage" HorizontalAlignment="Stretch" 
    		RenderTransformOrigin="0.5,0.3" Margin="100,-9,100,29" VerticalAlignment="Stretch" Width="100" Height="75">
            <Grid.RenderTransform>
                <ScaleTransform ScaleX="1" ScaleY="1" />
            </Grid.RenderTransform>

            <Rectangle HorizontalAlignment="Left" Width="5">
                <Rectangle.Fill>
                    <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                        <GradientStop Color="Transparent"  Offset="0" />
                        <GradientStop Color="White"  Offset="0.433" />
                    </LinearGradientBrush>
                </Rectangle.Fill>
                <Rectangle.OpacityMask>
                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                        <GradientStop Color="Transparent"  Offset="0" />
                        <GradientStop Color="Transparent"  Offset="0.01" />
                        <GradientStop Color="White"  Offset="0.05" />
                        <GradientStop Color="White"  Offset="0.95" />
                        <GradientStop Color="Transparent"  Offset="0.99" />
                        <GradientStop Color="Transparent"  Offset="1" />
                    </LinearGradientBrush>
                </Rectangle.OpacityMask>
            </Rectangle>
            <Rectangle HorizontalAlignment="Right" Width="5">
                <Rectangle.Fill>
                    <LinearGradientBrush StartPoint="1,0" EndPoint="0,0">
                        <GradientStop Color="Transparent"  Offset="0" />
                        <GradientStop Color="White"  Offset="0.379" />
                    </LinearGradientBrush>
                </Rectangle.Fill>
                <Rectangle.OpacityMask>
                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                        <GradientStop Color="Transparent"  Offset="0" />
                        <GradientStop Color="Transparent"  Offset="0.01" />
                        <GradientStop Color="White"  Offset="0.05" />
                        <GradientStop Color="White"  Offset="0.95" />
                        <GradientStop Color="Transparent"  Offset="0.99" />
                        <GradientStop Color="Transparent"  Offset="1" />
                    </LinearGradientBrush>
                </Rectangle.OpacityMask>
            </Rectangle>
            <Rectangle VerticalAlignment="Top" Height="5" Margin="1,0">
                <Rectangle.Fill>
                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                        <GradientStop Color="Transparent"  Offset="0" />
                        <GradientStop Color="White"  Offset="0.429" />
                    </LinearGradientBrush>
                </Rectangle.Fill>
                <Rectangle.OpacityMask>
                    <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                        <GradientStop Color="Transparent"  Offset="0" />
                        <GradientStop Color="Transparent"  Offset="0.005" />
                        <GradientStop Color="White"  Offset="0.03" />
                        <GradientStop Color="White"  Offset="0.97" />
                        <GradientStop Color="Transparent"  Offset="0.995" />
                        <GradientStop Color="Transparent"  Offset="1" />
                    </LinearGradientBrush>
                </Rectangle.OpacityMask>
            </Rectangle>
            <Rectangle VerticalAlignment="Bottom" Height="5" Margin="1,0">
                <Rectangle.Fill>
                    <LinearGradientBrush StartPoint="0,1" EndPoint="0,0">
                        <GradientStop Color="Transparent"  Offset="0" />
                        <GradientStop Color="White"  Offset="0.397" />
                    </LinearGradientBrush>
                </Rectangle.Fill>
                <Rectangle.OpacityMask>
                    <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                        <GradientStop Color="Transparent"  Offset="0" />
                        <GradientStop Color="Transparent"  Offset="0.005" />
                        <GradientStop Color="White"  Offset="0.03" />
                        <GradientStop Color="White"  Offset="0.97" />
                        <GradientStop Color="Transparent"  Offset="0.995" />
                        <GradientStop Color="Transparent"  Offset="1" />
                    </LinearGradientBrush>
                </Rectangle.OpacityMask>
            </Rectangle>

            <Image Source="{Binding Path=Icon, Mode=OneWay}" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Row="0" Stretch="UniformToFill" Margin="4"/>
        </Grid>
        <ItemsControl x:Name="channelItems" Grid.Row="2" HorizontalAlignment="Center" Opacity="0" 
			ItemsSource="{Binding Mode=OneWay, Path=Channels, Source={StaticResource BroadcasterChannels}}" Margin="0,0,0,-20" Height="50" VerticalAlignment="Top">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Image Source="{Binding Path=Icon, Mode=OneWay}" />
                    </Grid>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Grid>
</UserControl>
